<!-- 短剧详情 -->
<!-- 短剧详情 -->
<template>
  <base-load-page
    ref="baseLoadPageRef"
    :loadState="pageLoad.loadState"
    :description="pageLoad.description"
    :pageLoadButton="[{ text: '重新加载', callBack: () => getBaseDataAxios() }]"
  >
    <div class="page-box">
      <el-scrollbar>
        <div class="scroll-page">
          <el-form ref="elFormRef" scrollToError :model="formData" :rules="rules" :validateOnRuleChange="false" :disabled="action === 'details'">
            <div style="display: flex; align-items: flex-start; justify-content: flex-start; width: 100%">
              <div class="img-module">
                <div class="img-box">
                  <el-form-item key="dramaCover" label="" prop="dramaCover" style="margin-bottom: 20px">
                    <!-- 海报 -->
                    <rest-upload-qn
                      v-model="formData.dramaCover"
                      folder="drama/poster"
                      :width="90 * baseSize"
                      :height="160 * baseSize"
                      :accept="['.png', '.jpg']"
                      :limit="1"
                      :afterSelectFile="openDramaCoverCropper"
                    ></rest-upload-qn>
                    <span class="img-title required">海报</span>
                  </el-form-item>
                  <el-form-item key="dramaCoverDyImage" label="" prop="dramaCoverDyImage" style="margin-bottom: 20px">
                    <!-- 抖音封面 -->
                    <rest-upload-qn
                      v-model="formData.dramaCoverDyImage"
                      folder="drama/cover"
                      :width="90 * baseSize"
                      :height="90 * baseSize"
                      :accept="['.png', '.jpg']"
                      :limit="1"
                      :minImageSize="1024 * 1"
                      :maxImageSize="1024 * 10"
                      :imageAspectRatio="[
                        [1, 1],
                        [2, 3],
                        [3, 4],
                      ]"
                    ></rest-upload-qn>
                    <span class="img-title required">抖音-封面</span>
                  </el-form-item>
                  <el-form-item key="costDistributionUri" label="" prop="costDistributionUri" style="margin-bottom: 20px">
                    <!-- 成本配置比例情况图 -->
                    <rest-upload-qn
                      v-model="formData.costDistributionUri"
                      folder="drama/cost"
                      :accept="['.png', '.jpg']"
                      :width="90 * baseSize"
                      :height="90 * baseSize"
                      :limit="1"
                      :minImageSize="5"
                      :maxImageSize="1024 * 5"
                    ></rest-upload-qn>
                    <span class="img-title required">抖音-成本配置</span>
                    <el-tooltip content="注意填写时总制作成本应大于等于1万小于等于29万且为整数,演员总片酬占比不得大于等于40%" placement="top">
                      <a class="img-template" href="/files/抖音-成本配置比例情况报告.docx" download="抖音-成本配置比例情况报告.docx" target="_blank">
                        <span>下载模版</span>
                        <icon-ep-question-filled></icon-ep-question-filled>
                      </a>
                    </el-tooltip>
                  </el-form-item>
                  <el-form-item key="dramaCoverThumb" label="" prop="dramaCoverThumb" style="margin-bottom: 20px">
                    <!-- 海报缩略图 -->
                    <rest-upload-qn
                      v-model="formData.commitmentStatement"
                      folder="drama/commitmentStatement"
                      :width="90 * baseSize"
                      :height="90 * baseSize"
                      :accept="['.png', '.jpg']"
                      :limit="1"
                      :afterSelectFile="openDramaCoverThumbCropper"
                    ></rest-upload-qn>
                    <span class="img-title">抖音-承诺书</span>
                    <a class="img-template" href="/files/抖音-承诺书.docx" download="抖音-承诺书.docx" target="_blank">
                      <span>下载模版</span>
                    </a>
                  </el-form-item>
                </div>
                <div class="img-box">
                  <el-form-item key="dramaCoverThumb" label="" prop="dramaCoverThumb" style="margin-bottom: 20px">
                    <!-- 海报缩略图 -->
                    <rest-upload-qn
                      v-model="formData.dramaCoverThumb"
                      folder="drama/dramaCoverThumb"
                      :width="90 * baseSize"
                      :height="160 * baseSize"
                      :accept="['.png', '.jpg']"
                      :limit="1"
                      :afterSelectFile="openDramaCoverThumbCropper"
                    ></rest-upload-qn>
                    <span class="img-title required">海报缩略图</span>
                  </el-form-item>
                  <el-form-item key="authorizedUrl" label="" prop="authorizedUrl" style="margin-bottom: 20px">
                    <!-- 授权证明 -->
                    <rest-upload-qn
                      v-model="formData.authorizedUrl"
                      folder="drama/cost"
                      :accept="['.png', '.jpg']"
                      :width="90 * baseSize"
                      :height="90 * baseSize"
                      :limit="1"
                      :minImageSize="5"
                      :maxImageSize="1024 * 5"
                    ></rest-upload-qn>
                    <span class="img-title required">微信-授权证明</span>
                    <el-tooltip
                      content="⑴剧目制作方/版权方与账号主体一致时，请上传附件1（需签章）；⑵剧目制作方/版权方与账号主体不一致时，请上传附件2或完整的播放授权材料（需签章）。上传时建议去掉附件中的黄色背景"
                      placement="top"
                    >
                      <a class="img-template" href="/files/微信-权利声明及不侵权承诺函.docx" download="微信-微信-权利声明及不侵权承诺函1.docx" target="_blank">
                        <span>下载模版</span>
                        <icon-ep-question-filled></icon-ep-question-filled>
                      </a>
                    </el-tooltip>
                  </el-form-item>
                  <el-form-item key="wechatCostDistributionUri" label="" prop="wechatCostDistributionUri" style="margin-bottom: 20px">
                    <!-- 微信成本配置比例情况图 -->
                    <rest-upload-qn
                      v-model="formData.wechatCostDistributionUri"
                      folder="drama/cost"
                      :accept="['.png', '.jpg']"
                      :width="90 * baseSize"
                      :height="90 * baseSize"
                      :limit="1"
                      :minImageSize="5"
                      :maxImageSize="1024 * 5"
                    ></rest-upload-qn>
                    <span class="img-title required">微信-成本配置</span>
                    <el-tooltip
                      content="注意填写时总制作成本应大于等于1万小于等于29万且为整数,演员总片酬占比不得大于等于40%,上传时建议去掉附件中的黄色背景"
                      placement="top"
                    >
                      <a class="img-template" href="/files/微信-成本配置比例情况报告.docx" download="微信-成本配置比例情况报告.docx" target="_blank">
                        <span>下载模版</span>
                        <icon-ep-question-filled></icon-ep-question-filled>
                      </a>
                    </el-tooltip>
                  </el-form-item>
                </div>
              </div>
              <div style="flex: 1; width: 100%">
                <div ref="parent" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); grid-gap: 0 30px; width: 100%">
                  <el-form-item label="短剧名称" labelWidth="6em" prop="dramaTitle">
                    <el-input v-model="formData.dramaTitle" :maxlength="dramaTitleMax" placeholder="请输入短剧名称" clearable></el-input>
                  </el-form-item>
                  <el-form-item label="制作机构" labelWidth="6em" prop="organizationName">
                    <bubble-select-local
                      v-model="formData.organizationName"
                      labelKey="organizationName"
                      valueKey="organizationName"
                      allowCreate
                      :axios="getOrganzationListAxios"
                      placeholder="请选择制作机构"
                    ></bubble-select-local>
                  </el-form-item>
                  <el-form-item label="制作成本" labelWidth="6em" prop="productionCost">
                    <base-input-number
                      v-model="formData.productionCost"
                      :max="productionCostMax"
                      verify="add_int"
                      placeholder="请输入制作成本"
                      style="flex: 1"
                      clearable
                    >
                      <template #suffix>万元</template>
                    </base-input-number>
                  </el-form-item>
                  <el-form-item label="是否付费" labelWidth="6em" prop="isFree">
                    <box-from-border>
                      <el-radio-group v-model="formData.isFree">
                        <el-radio label="需要付费" :value="0"></el-radio>
                        <el-radio label="全部免费" :value="1"></el-radio>
                      </el-radio-group>
                    </box-from-border>
                  </el-form-item>
                  <el-form-item label="分类" labelWidth="6em" prop="categoryList">
                    <bubble-select-local
                      v-model="formData.categoryList"
                      labelKey="categoryName"
                      valueKey="categoryId"
                      returnOriginal
                      :multipleLimit="3"
                      :axios="dramaCategoryListAxios"
                      placeholder="请选择分类"
                      multiple
                    ></bubble-select-local>
                  </el-form-item>
                  <el-form-item label="拍摄年份" labelWidth="6em" prop="dramaYear">
                    <base-date-picker
                      v-model="formData.dramaYear"
                      type="year"
                      format="YYYY"
                      valueFormat="YYYY"
                      :shortcuts="false"
                      placeholder="请选择拍摄时间"
                      :startDate="`${year - 300}-01-01`"
                      :endDate="`${year}-01-01`"
                      clearable
                      style="flex: 1; width: 100%"
                    ></base-date-picker>
                  </el-form-item>
                  <el-form-item label="导演" labelWidth="6em" prop="directorInfo">
                    <box-from-border @click="handleAddDirector">
                      <div class="box-from-border-content-box" :class="{ 'box-from-border-content-box-disabled': action === 'details' }">
                        <div class="content-box">
                          <div v-if="formData.directorInfo" class="content">
                            <base-image
                              :src="formData.directorInfo.staffHeadImage"
                              style="width: 14px; height: 14px; overflow: hidden; border-radius: 10px"
                            ></base-image>
                            <span style="margin-left: 4px">{{ formData.directorInfo.name }}</span>
                            <span>-</span>
                            <span>{{ formData.directorInfo.staffSex === 1 ? '男' : '女' }}</span>
                          </div>
                          <span v-else class="placeholder">请选择导演</span>
                        </div>
                        <div class="icon">
                          <el-icon><icon-ep-arrow-right></icon-ep-arrow-right></el-icon>
                        </div>
                      </div>
                    </box-from-border>
                  </el-form-item>
                  <el-form-item label="制片人" labelWidth="6em" prop="producerInfo">
                    <box-from-border @click="handleAddCinemanufacturer">
                      <div class="box-from-border-content-box" :class="{ 'box-from-border-content-box-disabled': action === 'details' }">
                        <div class="content-box">
                          <div v-if="formData.producerInfo" class="content">
                            <base-image
                              :src="formData.producerInfo.staffHeadImage"
                              style="width: 14px; height: 14px; overflow: hidden; border-radius: 10px"
                            ></base-image>
                            <span style="margin-left: 4px">{{ formData.producerInfo.name }}</span>
                            <span>-</span>
                            <span>{{ formData.producerInfo.staffSex === 1 ? '男' : '女' }}</span>
                          </div>
                          <span v-else class="placeholder">请选择制片人</span>
                        </div>
                        <div class="icon">
                          <el-icon><icon-ep-arrow-right></icon-ep-arrow-right></el-icon>
                        </div>
                      </div>
                    </box-from-border>
                  </el-form-item>
                  <el-form-item label="总集数" labelWidth="6em" prop="seqNum">
                    <el-input-number
                      v-model="formData.seqNum"
                      stepStrictly
                      :step="1"
                      :precision="0"
                      :min="0"
                      :max="seqNumMax"
                      style="width: 100%"
                      placeholder="请输入总集数"
                    >
                      <template #suffix>集</template>
                    </el-input-number>
                  </el-form-item>
                  <el-form-item label="平均时长" labelWidth="6em" prop="avgDuration">
                    <base-input-number v-model="formData.avgDuration" :max="avgDurationMax" verify="add_float" placeholder="请输入平均时长" clearable>
                      <template #suffix>秒</template>
                    </base-input-number>
                  </el-form-item>
                  <el-form-item label="标签" labelWidth="6em" prop="tagsList">
                    <bubble-select-local
                      v-model="formData.tagsList"
                      allowCreate
                      returnOriginal
                      :multipleLimit="10"
                      :axios="getTagListAxios"
                      placeholder="请输入标签"
                      multiple
                    ></bubble-select-local>
                  </el-form-item>
                  <el-form-item v-if="formData.isFree === 0" label="免费集数" labelWidth="6em" prop="freeEpisodeNum">
                    <el-input-number
                      v-model="formData.freeEpisodeNum"
                      stepStrictly
                      :step="1"
                      :precision="0"
                      :min="0"
                      :max="(formData.seqNum || 0) - 1"
                      style="width: 100%"
                      placeholder="请输入前几集免费"
                    >
                      <template #suffix>集</template>
                    </el-input-number>
                  </el-form-item>
                  <el-form-item v-if="formData.isFree === 0" key="el-form-item-2" label="单集价格" labelWidth="6em" prop="price">
                    <base-input-number
                      v-model="formData.price"
                      verify="add_float"
                      placeholder="请输入解锁单集价格"
                      style="flex: 1"
                      :min="0"
                      :max="priceMax"
                      clearable
                    >
                      <template #suffix>元</template>
                    </base-input-number>
                  </el-form-item>
                  <el-form-item v-if="formData.isFree === 0" key="el-form-item-3" label="解锁全集" labelWidth="6em" prop="allEpisodePrice">
                    <base-input-number
                      v-model="formData.allEpisodePrice"
                      verify="add_float"
                      placeholder="请输入解锁全集价格"
                      style="flex: 1"
                      :min="0"
                      :max="allEpisodePriceMax"
                      clearable
                    >
                      <template #suffix>元</template>
                    </base-input-number>
                  </el-form-item>
                  <el-form-item label="备案号" labelWidth="6em" prop="reportNo">
                    <el-input v-model="formData.reportNo" placeholder="请输入备案号" clearable></el-input>
                  </el-form-item>

                  <el-form-item label="合作方" labelWidth="6em" prop="reportNo">
                    <bubble-select-local
                      v-model="partnerUser"
                      labelKey="nickname"
                      valueKey="userId"
                      returnOriginal
                      :axios="getPartnerUserListAxios"
                      placeholder="请选择合作方"
                    ></bubble-select-local>
                  </el-form-item>
                  <el-form-item label="推荐文案" labelWidth="6em" prop="dramaRecommendation">
                    <el-input
                      v-model="formData.dramaRecommendation"
                      placeholder="请输入推荐文案(用于抖音推荐)"
                      clearable
                      :maxlength="dramaRecommendationMax"
                    ></el-input>
                  </el-form-item>

                  <el-form-item  label="首次上线时间" labelWidth="120px" prop="firstPushTime">

                    <base-date-picker
                        v-model="formData.firstPushTime"
                        valueFormat="YYYY-MM-DD"
                        format="YYYY-MM-DD"
                        placeholder="请选择拉取数据结束时间"
                        type="date"
                        style="width: 100%"
                        clearable
                    ></base-date-picker>

                  </el-form-item>


                </div>
                <div style="display: grid; flex: 1; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); grid-gap: 0 30px">
                  <el-form-item label="演员角色" labelPosition="top" labelWidth="6em" prop="performerRoleList">
                    <avg-duration v-model="formData.performerRoleList" :disabled="action === 'details'"></avg-duration>
                  </el-form-item>
                  <el-form-item label="简介" labelPosition="top" labelWidth="6em" prop="dramaDesp">
                    <el-input
                      v-model="formData.dramaDesp"
                      placeholder="请输入简介"
                      :minlength="dramaDespMin"
                      :maxlength="dramaDespMax"
                      :autosize="{ minRows: 10, maxRows: 10 }"
                      type="textarea"
                      clearable
                      showWordLimit
                    ></el-input>
                  </el-form-item>



                </div>
              </div>
            </div>
          </el-form>
        </div>
      </el-scrollbar>
    </div>
    <template v-if="action !== 'details'" #foot>
      <el-button type="success" style="width: 100%" :loading="submitLoading" :disabled="submitLoading" :icon="IconSolarVideocameraAddOutline" @click="submit">
        {{ action === 'add' ? '提交' : '保存修改' }}
      </el-button>
    </template>
    <add-cinemanufacturer ref="addCinemanufacturerRef"></add-cinemanufacturer>
    <add-director ref="addDirectorRef"></add-director>
    <rest-image-cropper ref="restImageCropperRef"></rest-image-cropper>
  </base-load-page>
</template>

<script setup lang="ts">
  import IconSolarVideocameraAddOutline from '~icons/solar/videocamera-add-outline';
  import IconEpArrowRight from '~icons/ep/arrow-right';
  import {
    type Cinemanufacturer,
    type Director,
    type DramaAddRequest,
    type PartnerUser,
    dramaAddAxios,
    dramaCategoryListAxios,
    editDamaAxios,
    getDramaByIdAxios,
    getOrganzationListAxios,
    getPartnerUserListAxios,
    getTagListAxios,
  } from '@/api/drama-management';
  import { $mitt, UPDATE_DRAMA_LIST_MITT } from '@/utils/mitt-event';
  import { useAutoAnimate } from '@formkit/auto-animate/vue';
  import type { FormInstance } from 'element-plus';
  import { isObject } from '@/utils/verify';
  import AvgDuration from './components/avg-duration.vue';
  import { useCropperUtil, userUlesUtil, userValidateWatchUtil } from './components/util';
  import RestUploadQn from '@/components/rest/rest-upload-qn/rest-upload-qn.vue';
  import AddDirector from './components/add-director.vue';
  import AddCinemanufacturer from './components/add-cinemanufacturer.vue';

  const absStore = useTabsStore();
  const year = new Date().getFullYear();
  const addCinemanufacturerRef = ref<InstanceType<typeof AddCinemanufacturer>>();
  const addDirectorRef = ref<InstanceType<typeof AddDirector>>();
  const globalSize = computed(() => useGlobalStore().globalSize);
  const baseSize = computed(() => (globalSize.value === 'default' ? 1 : 0.9));
  const elFormRef = ref<FormInstance | null>(null);
  const formData = ref<DramaAddRequest>({
    avgDuration: null,
    producerInfo: null,
    reportNo: '',
    productionCost: null,
    performerRoleList: [],
    costDistributionUri: '',
    allEpisodePrice: null,
    price: null,
    dramaId: undefined,
    freeEpisodeNum: undefined,
    dramaTitle: '',
    categoryList: [],
    dramaCover: '',
    commitmentStatement: '',
    dramaDesp: '',
    isFree: 0,
    partnerNickname: null,
    partnerUserId: null,
    tagsList: [],
    directorInfo: undefined,
    performerList: [],
    dramaRecommendation: '',
    seqNum: undefined,
    dramaYear: '',
    organizationName: '',
    dramaCoverDyImage: '',
    dramaCoverThumb: '',
    authorizedUrl: '',
    wechatCostDistributionUri: '',
  });

  const {
    dramaTitleMax,
    productionCostMax,
    avgDurationMax,
    dramaDespMin,
    dramaDespMax,
    dramaRecommendationMax,
    allEpisodePriceMax,
    priceMax,
    seqNumMax,
    rules,
  } = userUlesUtil(formData);
  const { restImageCropperRef, openDramaCoverCropper, openDramaCoverThumbCropper } = useCropperUtil();
  // 注册验证监听
  userValidateWatchUtil(elFormRef, formData);
  const route = useRoute();
  const router = useRouter();

  const baseLoadPageRef: $RefComp<'BaseLoadPage'> = ref(null);
  const pageLoad = shallowReactive<$PageLoad>({ loadState: true, description: '' });
  const [parent] = useAutoAnimate();
  const submitLoading = ref(false);
  const action = ref<'add' | 'details' | 'edit'>('add');
  const partnerUser = ref<PartnerUser | undefined>(undefined);
  const dramaId = ref<number | null>(null);
  onBeforeMount(() => {
    action.value = route.query.type === 'add' ? 'add' : route.query.type === 'edit' ? 'edit' : 'details';
    dramaId.value = 'dramaId' in route.query && !isNaN(Number(route.query.dramaId)) ? Number(route.query.dramaId) : null;
    absStore.editMateTitle(route.fullPath, action.value === 'add' ? '新增短剧' : action.value === 'edit' ? '修改短剧' : '短剧详情');
    getBaseDataAxios();
  });

  // onBeforeRouteLeave(() => {
  //   absStore.delTabsByPath(route.fullPath);
  // });
  // onBeforeUnmount(() => {
  //   absStore.delTabsByPath(route.fullPath);
  // });
  watch(
    () => partnerUser.value,
    (val) => {
      formData.value.partnerNickname = val && isObject(val) ? val.nickname : null;
      formData.value.partnerUserId = val && isObject(val) ? val.userId : null;
    }
  );

  /** 导演 */
  function handleAddDirector() {
    if (['details'].includes(action.value)) {
      return;
    }
    addDirectorRef.value?.show({
      directorInfo: formData.value.directorInfo || null,
      addCallBack(res: Director) {
        formData.value.directorInfo = res;
      },
    });
  }
  /** 制片人 */
  function handleAddCinemanufacturer() {
    if (['details'].includes(action.value)) {
      return;
    }
    addCinemanufacturerRef.value?.show({
      producerInfo: formData.value.producerInfo || null,
      addCallBack(res: Cinemanufacturer) {
        formData.value.producerInfo = res;
      },
    });
  }

  /** 提交 */
  async function submit() {
    try {
      await elFormRef.value?.validate();
      try {
        submitLoading.value = true;
        if (action.value === 'edit' && formData.value.dramaId) {
          // 修改
          await editDamaAxios({ ...formData.value, dramaId: formData.value.dramaId! });
          $mitt.emit(UPDATE_DRAMA_LIST_MITT);
          ElToast.success('修改成功');
        } else {
          // 新增
          const res = await dramaAddAxios(formData.value);
          formData.value.dramaId = res.data;
          action.value = 'edit';
          ElToast.success('新增成功');
        }
        submitLoading.value = false;
        await router.replace('/drama-management/drama-list');
      } catch (error) {
        submitLoading.value = false;
        ElToast.error(error.msg || '提交失败，-BD003');
      }
    } catch (error) {
      ElToast.error('提交失败，请完善表单，-BD002');
    }
  }

  /**
   * 显示
   */
  async function getBaseDataAxios() {
    if (['edit', 'details'].includes(action.value) && dramaId.value) {
      try {
        pageLoad.loadState = true;
        const res = await getDramaByIdAxios(dramaId.value);
        partnerUser.value = res.data?.partnerUser || undefined;
        formData.value = {
          dramaId: res.data ? res.data.dramaId : undefined,
          dramaTitle: res.data ? res.data.dramaTitle || '' : '',
          dramaCoverDyImage: res.data ? String(res.data.dramaCoverDyImage || '') : '',
          categoryList: res.data && Array.isArray(res.data.categoryList) ? res.data.categoryList : [],
          dramaCover: res.data ? String(res.data.dramaCover || '') : '',
          dramaDesp: res.data ? String(res.data.dramaDesp || '') : '',
          reportNo: res.data ? String(res.data.reportNo || '') : '',
          dramaCoverThumb: res.data ? String(res.data.dramaCoverThumb || '') : '',
          organizationName: res.data && isObject(res.data.organizationInfo) ? res.data.organizationInfo.organizationName : '',
          producerInfo: res.data && res.data.producerInfo ? res.data.producerInfo : null,
          productionCost: res.data && typeof res.data.productionCost === 'number' ? res.data.productionCost : null,
          avgDuration: res.data && typeof res.data.avgDuration === 'number' ? res.data.avgDuration : null,
          price: res.data && typeof res.data.price === 'number' ? res.data.price : null,
          performerRoleList: res.data && Array.isArray(res.data?.performerRoleList) ? res.data.performerRoleList : [],
          costDistributionUri: res.data ? String(res.data.costDistributionUri || '') : '',
          tagsList: res.data && Array.isArray(res.data.tagsList) ? res.data.tagsList : [],
          directorInfo: res.data && res.data.directorInfo ? res.data.directorInfo : null,
          performerList: res.data && Array.isArray(res.data.performerList) ? res.data.performerList : [],
          dramaRecommendation: res.data ? String(res.data.dramaRecommendation || '') : '',
          seqNum: res.data && typeof res.data.seqNum === 'number' ? res.data.seqNum : 0,
          dramaYear: res.data ? String(res.data.dramaYear || '') : '',
          isFree: res.data && typeof res.data.isFree === 'number' ? res.data.isFree : 0,
          allEpisodePrice: res.data && typeof res.data.allEpisodePrice === 'number' ? res.data.allEpisodePrice : 0,
          freeEpisodeNum: res.data && typeof res.data.freeEpisodeNum === 'number' ? res.data.freeEpisodeNum : 0,
          partnerNickname: res.data && isObject(res.data.partnerUser) ? res.data.partnerUser.nickname : null,
          partnerUserId: res.data && isObject(res.data.partnerUser) ? res.data.partnerUser.userId : null,
          authorizedUrl: res.data ? String(res.data.authorizedUrl || '') : '',
          wechatCostDistributionUri: res.data ? String(res.data.wechatCostDistributionUri || '') : '',
          commitmentStatement: res.data ? String(res.data.commitmentStatement || '') : '',
        };
        pageLoad.loadState = false;
      } catch (error) {
        pageLoad.loadState = 'err';
        pageLoad.description = String((error as Record<string, unknown>).msg || '') || '获取数据失败';
      }
    } else {
      pageLoad.loadState = false;
    }
  }
</script>

<style lang="scss" scoped>
  .head-box {
    @include flex(row, nowrap, flex-start, center, center);

    .left-box {
      display: grid;
      flex: 1;
      grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
      grid-gap: 15px;
      margin-right: 15px;
    }
  }

  .img-module {
    display: flex;
    flex-direction: row;

    .img-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      width: 90px;
      padding-left: 10px;
      margin-right: 15px;
    }
  }

  .page-box {
    width: calc(100% + $app-page-padding);
    height: 100%;
    padding-right: 0;
    margin-right: -$app-page-padding;
    overflow: hidden;

    .scroll-page {
      padding-right: $app-page-padding;
    }
  }

  .img-title {
    display: block;
    width: 90px;
    margin-top: 8px;
    font-size: 12px;
    line-height: 18px;
    color: var(--el-text-color-regular);
    text-align: center;

    &.required:before {
      margin-right: 4px;
      color: var(--el-color-danger);
      content: '*';
    }
  }

  .img-template {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-size: 12px;
    color: var(--el-color-primary);
    text-align: center;
  }

  .box-from-border-content-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: pointer;

    .content-box {
      flex: 1;

      .content {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        color: var(--el-text-color-regular);
      }

      .placeholder {
        color: var(--el-text-color-placeholder);
      }
    }

    .icon {
      display: flex;
      flex-shrink: 0;
      gap: 6px;
      align-items: center;
      font-size: 14px;
      color: var(--el-text-color-placeholder);
      cursor: pointer;
    }
  }

  .box-from-border-content-box-disabled {
    cursor: default;
  }
</style>
